import { Card, Space, Typography } from "antd";
import dayjs from "dayjs";

const { Text } = Typography;

const WorkDetail = ({ props = {} }) => {

    const { date, events } = props;

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            flex: '1',
            border: '1px solid #f0f0f0',
            borderRadius: 8,
            padding: '10px 16px 16px',
            minWidth: '320px',
            backgroundColor: '#fff',
            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)'
        }}>
            <Space style={{
                display: 'flex',
                justifyContent: 'space-between',
                width: '100%',
                marginBottom: 20,
                paddingBottom: 8,
                borderBottom: '1px solid #f0f0f0',
                alignItems: 'center'
            }}>
                <Text strong style={{ fontSize: '15px', color: 'rgba(0, 0, 0, 0.85)', fontWeight: 500 }}>
                    {date}
                </Text>
                <Space size="small">
                    
                </Space>
            </Space>

            {events.length > 0 ? (
                <div style={{
                    display: 'grid',
                    gap: '12px',
                    overflowY: 'auto',
                    paddingRight: 4,
                    maxHeight: 'calc(100vh - 180px)'
                }}>
                    {events.map((event, index) => (
                        <Card
                            key={index}
                            size="small"
                            className='hoverCard'
                            title={
                                <Text strong>
                                    {event.title}
                                </Text>
                            }
                            style={{
                                borderLeft: `3px solid ${event.color || '#1890ff'}`,
                                borderRadius: '6px',
                                boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
                                marginBottom: 8
                            }}
                        >
                            <div style={{
                                lineHeight: '1.5',
                                fontSize: '13px',
                                color: 'rgba(0, 0, 0, 0.65)'
                            }}>
                                <p style={{ marginBottom: 6 }}>
                                    <Text strong style={{ color: 'rgba(0, 0, 0, 0.85)' }}>时 &nbsp; 间：</Text>
                                    {dayjs(event.start).format('YYYY-MM-DD HH:mm')}
                                    {event.end && ` ~ ${dayjs(event.end).format('HH:mm')}`}
                                </p>
                                <p style={{ marginBottom: 0 }}>
                                    <Text strong style={{ color: 'rgba(0, 0, 0, 0.85)' }}>备 &nbsp; 注：</Text>
                                    {event.remark}
                                </p>
                            </div>
                        </Card>
                    ))}
                </div>
            ) : (
                <div
                    style={{
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: '#999',
                        flexDirection: 'column',

                    }}
                >
                    <div style={{ fontSize: '48px', marginBottom: '10px' }} >📅</div>
                    <p>暂未安排工作</p>
                </div>
            )}
        </div >
    );
}

export default WorkDetail;